import React, { PropTypes } from 'react'
import _ from 'lodash'

class MapLocation extends React.Component {
  constructor() {
    super()
    this.map = null
    this.opts = {
      width : 120,     // 信息窗口宽度
      height: 40,     // 信息窗口高度
      title : '门店地址', // 信息窗口标题
      enableMessage:true// 设置允许信息窗发送短息
    };
  }

  render() {
    let { height, width } = this.props
    return (
      <div className='map' id='map' style={{ width: height, height: width, overflow: 'hidden', margin:0, fontFamily:'微软雅黑' }} />
    )
  }
  shouldComponentUpdate(nextProps, nextState) {
    return false;
  }

  componentWillReceiveProps(nextProps) {
  }

  componentDidMount() {
    this.map = new BMap.Map('map')
    this.map.setCurrentCity('重庆')
    this.map.enableScrollWheelZoom()

    // 左上角，添加比例尺
    let topLeftControl = new BMap.ScaleControl({
      anchor: BMAP_ANCHOR_TOP_LEFT
    })
    // 左上角，添加默认缩放平移控件
    let topLeftNavigation = new BMap.NavigationControl()
    // 右上角，仅包含平移和缩放按钮
    let topRightNavigation = new BMap.NavigationControl({
      anchor: BMAP_ANCHOR_TOP_RIGHT, type: BMAP_NAVIGATION_CONTROL_SMALL
    })
    this.map.addControl(topLeftControl);
    this.map.addControl(topLeftNavigation);
    this.map.addControl(topRightNavigation);

    let { stores, storeId } = this.props

    _.map(stores, (v, k) => {
      let point = new BMap.Point(v.longitude, v.latitude);
      //let myIcon = new BMap.Icon('http://developer.baidu.com/map/jsdemo/img/fox.gif', new BMap.Size(300, 157));
      //let marker = new BMap.Marker(point, { icon:myIcon });
      let marker = new BMap.Marker(point);

      if (v.storeId === storeId) {
        marker.setAnimation(BMAP_ANIMATION_BOUNCE);
        this.map.centerAndZoom(point, 13)
      }

      this.map.addOverlay(marker);

      // 创建标注
      this.addClickHandler(v.address, marker);

      if (v.storeId === storeId) {
        // 创建信息窗口对象
        let infoWindow = new BMap.InfoWindow(v.address, this.opts);
        // 开启信息窗口
        this.map.openInfoWindow(infoWindow, point);
      }
    })
  }

  addMarker(point, content) {
    let marker = new BMap.Marker(point)
    this.map.addOverlay(marker)
    this.addClickHandler(content, marker)
  }

  addClickHandler(content, marker) {
    marker.addEventListener('click', (e) => {
      this.openInfo(content, e)
    })
  }

  openInfo(content, e) {
    let p = e.target;
    let point = new BMap.Point(p.getPosition().lng, p.getPosition().lat)
    // 创建信息窗口对象
    let infoWindow = new BMap.InfoWindow(content, this.opts)
    // 开启信息窗口
    this.map.openInfoWindow(infoWindow, point)
  }
}

/*
 stores  : 门店信息
 storeId : 当前门店ID
 * */
MapLocation.propTypes = {
  stores: PropTypes.array.isRequired,
  storeId: PropTypes.number.isRequired,
  height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
}

/*
 let stores = [
   {
     storeId: 1,
     longitude: 106.51871,
     latitude: 29.598242,
     address: '芭菲盛宴北城国际店',
   },
   {
     storeId: 2,
     longitude: 106.516658,
     latitude: 29.534856,
     address: '芭菲盛宴奥体店',
   },
   {
     storeId: 3,
     longitude: 106.58193,
     latitude: 29.562108,
     address: '芭菲盛宴解放碑店',
   },
   {
     storeId: 4,
     longitude: 106.533175,
     latitude: 29.532343,
     address: '芭菲嘉宴九滨店',
   },
   {
     storeId: 5,
     longitude: 106.467571,
     latitude: 29.51627,
     address: '芭菲嘉宴二郎店',
   },
 ]

 <MapLocation
   stores={stores}
   storeId={1}
   height={800}
   width={600}
 />
* */

export default MapLocation
